<template>
  <div>
    <a-card class="app" :bordered="false">
      <a-spin :spinning="loading">
        <a-divider orientation="left">{{ $t('modules.common.busiApp') }}</a-divider>
        <div class="app-group-wrap">
          <a-row :gutter="30" v-if="bussiness.length > 0" class="app-group">
            <a-col :span="6" v-for="item in bussiness" :key="item.id">
              <div class="app-item" @click="openApp(item)">
                <div class="app-icon">
                  <a-badge :count="unreadMap[item.appId] || 0" :offset="[-5, 5]">
                    <a-avatar :size="60" icon="appstore" :src="item.logo | imgURLFilter" />
                  </a-badge>
                </div>
                <div class="app-info">
                  <h3 class="title ellipsis">{{ item.name }}</h3>
                  <div class="desc ellipsis" :title="item.briefIntro">{{ item.briefIntro }}</div>
                </div>
              </div>
            </a-col>
          </a-row>
          <a-empty v-if="bussiness.length === 0" description="暂无应用" />
        </div>

        <a-divider orientation="left">{{ $t('menu.industrialModel') }}</a-divider>
        <div class="app-group-wrap">
          <a-row :gutter="30" v-if="basic.length > 0" class="app-group">
            <a-col :span="6" v-for="item in basic" :key="item.id">
              <div class="app-item" @click="openApp(item)">
                <template v-if="item.type === 2">
                  <div class="app-icon">
                    <a-badge :count="unreadMap[item.appId] || 0" :offset="[-5, 5]">
                      <a-avatar :size="60" icon="appstore" :src="item.logo | imgURLFilter" />
                    </a-badge>
                  </div>
                  <div class="app-info">
                    <h3 class="title ellipsis">{{ item.name }}</h3>
                    <div class="desc ellipsis" :title="item.briefIntro">{{ item.briefIntro }}</div>
                  </div>
                </template>
                <template v-else>
                  <div class="app-icon">
                    <a-avatar :size="60" icon="appstore" :src="item.logo" />
                  </div>
                  <div class="app-info">
                    <h3 class="title ellipsis">{{ $t(item.title) }}</h3>
                    <div class="desc ellipsis" :title="$t(item.description)">{{ $t(item.description) }}</div>
                  </div>
                </template>
              </div>
            </a-col>
          </a-row>
          <a-empty v-if="basic.length === 0" description="暂无应用" />
        </div>

        <a-divider orientation="left">{{ $t('modules.common.DevOperAndcenter') }}</a-divider>
        <div class="app-group-wrap">
          <a-row :gutter="30" v-if="third.length > 0" class="app-group">
            <a-col :span="6" v-for="item in third" :key="item.id">
              <div class="app-item" @click="openApp(item)">
                <template v-if="item.type === 2">
                  <div class="app-icon">
                    <a-badge :count="unreadMap[item.appId] || 0" :offset="[-5, 5]">
                      <a-avatar :size="60" icon="appstore" :src="item.logo | imgURLFilter" />
                    </a-badge>
                  </div>
                  <div class="app-info">
                    <h3 class="title ellipsis">{{ item.name }}</h3>
                    <div class="desc ellipsis" :title="item.briefIntro">{{ item.briefIntro }}</div>
                  </div>
                </template>
                <template v-else>
                  <div class="app-icon">
                    <a-avatar :size="60" icon="appstore" :src="item.logo" />
                  </div>
                  <div class="app-info">
                    <h3 class="title ellipsis">{{ $t(item.title) }}</h3>
                    <div class="desc ellipsis" :title="$t(item.description)">{{ $t(item.description) }}</div>
                  </div>
                </template>
              </div>
            </a-col>
          </a-row>
          <a-empty v-if="third.length === 0" description="暂无应用" />
        </div>
      </a-spin>
    </a-card>
    <a-layout-footer>
      <global-footer />
    </a-layout-footer>
  </div>
</template>

<script>
import GlobalFooter from '@/components/GlobalFooter'
import { readDashboardAppsList } from '@/api/application'
import { mapState } from 'vuex'

// mos内部页面logo设置
const IMGENUM = {
  authenticationCenter: require('@/assets/images/dashboard/structure.png'),
  platformManagement: require('@/assets/images/dashboard/production.png'),
  technology: require('@/assets/images/dashboard/material.png'),
  messageCenter: require('@/assets/images/dashboard/msg.png'),
  industrialBigData: require('@/assets/images/dashboard/industrialBigData.png'),
  dataModeling: require('@/assets/images/dashboard/dataModeling.png'),
  edgeManagement: require('@/assets/images/dashboard/edge.png')
}
const INFOMAP = {
  authenticationCenter: 'modules.common.authenticationCenterInfo',
  platformManagement: 'modules.common.platformManagementInfo',
  technology: 'modules.common.technologyInfo',
  messageCenter: 'modules.common.messageInfo',
  industrialBigData: 'modules.common.industrialBigData',
  dataModeling: 'modules.common.dataModeling',
  edgeManagement: 'modules.common.edgeManagement'
}
export default {
  name: 'Dashboard',
  components: {
    GlobalFooter
  },
  data () {
    return {
      loading: true,
      list: [],
      basic: [],
      bussiness: [],
      third: [],
      datamodeingUrl: ''
    }
  },
  computed: {
    ...mapState({
      unreadMap: state => state.message.unreadMap
    }),
    isAdmin () {
      return !this.$store.getters.roles.includes('user')
    }
  },

  mounted () {
    this.getAppList()
  },
  methods: {
    // 获取 App
    getAppList () {
      readDashboardAppsList()
        .then(res => {
          this.list = res.data || []
          const list = this.list.map(i => {
            if (i.type === 1) {
              if (i.canEditVisitUrl) {
                i.linkType = 'windowOpen'
              } else {
                i.linkType = 'routeLink'
              }
            } else {
              i.linkType = 'windowOpen'
            }
            return i
          })
          this.bussiness = list.filter(i => i.type !== 1 && i.positionFlag === 'dashboard_bussiness')
          this.basic.push(...list.filter(i => i.type !== 1 && i.positionFlag === 'dashboard_basic'))
          this.third.push(...list.filter(i => i.positionFlag === 'dashboard_third'))
          this.configRouter()
        })
        .catch(() => {
          // 从动态路由上获取渲染的
          this.configRouter()
        })
        .finally(() => {
          this.loading = false
        })
    },
    configRouter () {
      // 从动态路由上获取渲染的
      const { DevOperAndcenterRouters, industrialBigDataRouters, dataModelingRouters } = this.$store.getters
      // 工业大数据管理
      if (industrialBigDataRouters) {
        industrialBigDataRouters.logo = IMGENUM[industrialBigDataRouters.name]
        industrialBigDataRouters.visitUrl = industrialBigDataRouters.path
        industrialBigDataRouters.description = INFOMAP[industrialBigDataRouters.name]
        industrialBigDataRouters.linkType = 'locationHref'
        this.basic.push(industrialBigDataRouters)
      }
      // 数据建模分析
      if (dataModelingRouters) {
        dataModelingRouters.logo = IMGENUM[dataModelingRouters.name]
        dataModelingRouters.description = INFOMAP[dataModelingRouters.name]
        dataModelingRouters.visitUrl = dataModelingRouters.path
        const configData = this.list.filter(i => i.name === '数据建模分析')[0]
        if (configData) {
          dataModelingRouters.visitUrl = configData.visitUrl
        }
        dataModelingRouters.linkType = 'windowOpen'
        this.basic.push(dataModelingRouters)
      }
      // 认证中心，平台管理，技术库，消息中心，Edge管理
      if (DevOperAndcenterRouters && DevOperAndcenterRouters.length) {
        DevOperAndcenterRouters.forEach(i => {
          i.appType = 'DevOperAndcenter'
          i.logo = IMGENUM[i.name]
          i.description = INFOMAP[i.name]
          i.linkType = 'routeLink'
        })
        this.third = this.third.concat(DevOperAndcenterRouters)
      }
    },
    // 打开应用
    openApp (info) {
      const { visitUrl, linkType } = info
      const token = this.$store.getters.token
      const lang = this.$store.getters.lang
      if (linkType === 'routeLink') {
        this.$router.push({ name: info.name })
      } else if (linkType === 'locationHref') {
        const { href, hash } = location
        const homeUrl = href.split(`/${hash}`)[0]
        window.location.href = `${homeUrl}${visitUrl}`
      } else if (linkType === 'windowOpen') {
        let url = ''
        // 工业APP跳转
        if (visitUrl && visitUrl.includes('?')) {
          url = `${visitUrl}&token=${token}&lang=${lang}`
        } else {
          url = `${visitUrl}?token=${token}&lang=${lang}`
        }
        window.open(url)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.app {
  margin-bottom: 40px;
  // 卡片尽可能占用更多空间
  min-height: calc(100vh - 50px - 84px - 24px * 2 - 84px);

  &-group {
    padding: 30px 20px;

    &-wrap {
      min-height: 130px;
    }
  }

  &-item {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    cursor: pointer;

    &:hover {
      .app-setting {
        display: inline-block;
      }
    }
  }

  &-icon {
    margin-right: 16px;
  }

  &-info {
    position: relative;
    flex: 1;
    overflow: hidden;
  }

  &-setting {
    position: absolute;
    top: 0;
    right: 0;
    padding: 2px;
    font-size: 20px;
    color: #1890ff;
    cursor: pointer;
    display: none;
  }

  .title {
    font-size: 20px;
  }

  .desc {
    color: rgba(0, 0, 0, 0.45);
  }

  .ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>
